<template>
  <div class="details">
    <h3>{{ title }}</h3>
    <h4>{{ content }}</h4>
    <img
      v-for="(item, index) in sheepDogList"
      :key="index"
      :src="item"
      alt="pictures"
    />
    <button @click="addOne">添加图片</button>
    <button @click="learnMore">了解更多</button>
  </div>
</template>

<script setup lang="ts" name="Details">
defineProps(["id", "title", "content"]);

import { watch, reactive } from "vue";
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
import usePets from "../hooks/usePets";

const { sheepDogList, addOne } = usePets();
let route = useRoute();
let router = useRouter();

//let dogList = reactive([])

/*
watch(
  () => route.query.id,
  (newId) => {
    switch (newId) {
      case "3":
      dogList = sheepDogList
    }
  }
);
*/

function learnMore() {
  router.push("/story");
}
</script>

<style scoped>
img {
  height: 200px;
}
button {
  margin: 0 5px;
}
</style>